<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linux 环境下 Node.js 安装指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1.5rem;
            overflow-x: auto;
            position: relative;
        }
        .code-block::before {
            content: attr(data-lang);
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            font-size: 0.75rem;
            color: #858585;
            text-transform: uppercase;
        }
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.25rem;
            flex-shrink: 0;
        }
        .image-container {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .image-container:hover {
            transform: scale(1.02);
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .highlight-text {
            background: linear-gradient(to right, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <div class="floating-icon mb-6">
                <i class="fab fa-node-js text-6xl"></i>
            </div>
            <h1 class="text-5xl font-bold mb-4" style="font-family: 'Noto Serif SC', serif;">
                Linux 环境下 Node.js 安装指南
            </h1>
            <p class="text-xl opacity-90 max-w-3xl mx-auto">
                从零开始，轻松搭建 Node.js 开发环境，包含 npm、yarn、pnpm 等包管理工具的完整配置
            </p>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-6 py-12">
        <!-- Overview Card -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 card-hover">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fas fa-rocket text-purple-600 mr-3"></i>
                安装流程概览
            </h2>
            <div class="mermaid">
                graph LR
                    A[下载 Node.js] --> B[解压文件]
                    B --> C[重命名目录]
                    C --> D[创建软链接]
                    D --> E[安装包管理器]
                    E --> F[配置完成]
                    
                    style A fill:#667eea,stroke:#fff,stroke-width:2px,color:#fff
                    style B fill:#7c3aed,stroke:#fff,stroke-width:2px,color:#fff
                    style C fill:#8b5cf6,stroke:#fff,stroke-width:2px,color:#fff
                    style D fill:#a78bfa,stroke:#fff,stroke-width:2px,color:#fff
                    style E fill:#c4b5fd,stroke:#fff,stroke-width:2px,color:#fff
                    style F fill:#764ba2,stroke:#fff,stroke-width:2px,color:#fff
            </div>
        </div>

        <!-- Step 1 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">1</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">找到对应版本 Node.js 包</h2>
                    <p class="text-gray-600">访问 <a href="http://nodejs.cn/download/" target="_blank" class="highlight-text hover:underline">Node.js 中文网</a> 选择适合的版本</p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="image-container">
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1677123785599-a1c945bc-1138-446d-a9c7-e11b0472df34.png" alt="NodeJS版本选择" class="w-full">
                </div>
                <div class="space-y-4">
                    <div class="image-container">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1677123804788-99ed23c3-3c6c-422b-b440-0fdc045db7fc.png" alt="版本列表" class="w-full">
                    </div>
                    <div class="image-container">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1677123828490-09bfd966-e18f-4d19-ad11-f8dee14b8918.png" alt="下载选项" class="w-full">
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 2 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">2</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">下载 Node.js 文件</h2>
                    <p class="text-gray-600">使用 wget 命令下载指定版本</p>
                </div>
            </div>
            <div class="code-block" data-lang="bash">
                <pre>cd /usr/local/dev-tools/
wget https://registry.npmmirror.com/-/binary/node/latest-v10.x/node-v10.24.1-linux-x64.tar.gz</pre>
            </div>
        </div>

        <!-- Step 3 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">3</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">解压重命名</h2>
                    <p class="text-gray-600">解压下载的文件并重命名为更简洁的目录名</p>
                </div>
            </div>
            <div class="code-block" data-lang="bash">
                <pre>tar -zxf node-v10.24.1-linux-x64.tar.gz
mv node-v10.24.1-linux-x64 ./nodejs</pre>
            </div>
        </div>

        <!-- Step 4 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">4</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">建立软链接</h2>
                    <p class="text-gray-600">创建软链接使命令全局可用</p>
                </div>
            </div>
            <div class="bg-purple-50 border-l-4 border-purple-600 p-4 mb-6">
                <p class="text-gray-700">
                    <i class="fas fa-info-circle text-purple-600 mr-2"></i>
                    因为我们是解压到了指定目录，但是无法全局执行，可以设置环境变量，但是那样就需要改 <code class="bg-purple-100 px-2 py-1 rounded text-purple-700">/etc/profile</code> 文件，其实只需要加软链接到已经环境变量的路径即可。
                </p>
            </div>
            <div class="code-block" data-lang="bash">
                <pre>ln -s /usr/local/dev-tools/nodejs/bin/node /usr/bin
ln -s /usr/local/dev-tools/nodejs/bin/npm /usr/bin
ln -s /usr/local/dev-tools/nodejs/bin/npx /usr/bin
npm install -g pnpm
ln -s /usr/local/dev-tools/nodejs/bin/pnpm /usr/bin
ln -s /usr/local/dev-tools/nodejs/bin/pnpx /usr/bin
npm install -g yarn
ln -s /usr/local/dev-tools/nodejs/bin/yarn /usr/bin
ln -s /usr/local/dev-tools/nodejs/bin/yarnpkg /usr/bin</pre>
            </div>
        </div>

        <!-- Step 5 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">5</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">运行测试</h2>
                    <p class="text-gray-600">验证安装是否成功</p>
                </div>
            </div>
            <div class="code-block" data-lang="bash">
                <pre>npm -v
node -v</pre>
            </div>
        </div>

        <!-- Step 6 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">6</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">安装 CNPM</h2>
                    <p class="text-gray-600">配置淘宝镜像加速包下载</p>
                </div>
            </div>
            <div class="code-block" data-lang="bash">
                <pre># 安装 cnpm 插件
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 建立软链接
ln -s /usr/local/dev-tools/nodejs/bin/cnpm /usr/bin</pre>
            </div>
        </div>

        <!-- Results Section -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <div class="flex items-start mb-6">
                <div class="step-number mr-4">7</div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">测试结果</h2>
                    <p class="text-gray-600">查看安装后的版本信息和 node_modules 位置</p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="image-container">
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1677125040870-6ac63d59-0f1f-410d-9ab0-b426dc6af7ae.png" alt="测试结果" class="w-full">
                </div>
                <div class="image-container">
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1677125171702-83a6b34b-607b-4059-8531-92afe28b14bc.png" alt="node_modules位置" class="w-full">
                </div>
            </div>
        </div>

        <!-- Package Managers Overview -->
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl shadow-xl p-8 text-white">
            <h2 class="text-3xl font-bold mb-6 text-center">
                <i class="fas fa-box-open mr-3"></i>
                包管理器生态系统
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white bg-opacity-20 backdrop-blur rounded-xl p-6 text-center card-hover">
                    <i class="fab fa-npm text-4xl mb-4"></i>
                